import {
  addTargetLib,
  selectPmDimensionTypeByTypeCode,
  selectTargetLibTypeByTypeCode
} from '@/api/targetLib'
import {CCard} from '@/components/card'
import {TargetWeight} from '@/components/input/targetWeight'
import {PMContent, PMLayout, PMNav} from '@/components/others/layout'
import {CnNormalP} from '@/components/text'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {ant_design_vue} from '@/libs/global/antDesignVue'
import {checkRangeValue, replaceBreak} from '@/libs/toolkit'
import {defineComponent, reactive, computed, watch, onMounted, onUnmounted} from 'vue'

const {message} = ant_design_vue

export default defineComponent({
  name: 'addTargetToLib',
  setup(props, ctx) {
    const {router} = useGlobalAPI()
    let state = reactive<{
      targetLibTypes: Dict.Item<'007', string>[]
      pmDimensionTypes: Dict.Item<'006', string>[]
    }>({
      targetLibTypes: [],
      pmDimensionTypes: []
    })

    let targetLibData = reactive<
      Omit<PmTargetLib.TargetLibDataByAdd, 'targetLibTypeCode' | 'targetLibWeight'> & {
        targetLibTypeCode: string | undefined
        targetLibWeight: number | undefined
        selfContentTem: string | null | undefined
      }
    >({
      targetLibTypeCode: undefined,
      targetLibName: '',
      pmDimensionTypeCode: '',
      targetLibCode: '',
      targetLibStand: '',
      targetLibWeight: undefined,
      targetLibDesc: '',
      isMustSelect: 0,
      isBonus: 0,
      targetLibRange: '',
      selfContentTem: ''
    })

    const targetLibTypeSelectOptions = computed(() => {
      return state.targetLibTypes.map(item => ({
        label: item.dictName,
        value: item.dictCode
      }))
    })

    watch(
      () => targetLibData.targetLibTypeCode,
      n => {
        console.log(n)
      }
    )

    watch(
      () => targetLibData.isBonus,
      n => {
        if (n === 1) {
          targetLibData.targetLibWeight = 0
          targetLibData.isMustSelect = 1
        }
      }
    )

    function getPageData() {
      selectTargetLibTypeByTypeCode()
        .then(res => {
          state.targetLibTypes = res.data
          // state.targetLibTypeCode = (res.data ||
          //   [])[0].dictCode
        })
        .catch(res => {})

      selectPmDimensionTypeByTypeCode()
        .then(res => {
          state.pmDimensionTypes = res.data
          targetLibData.pmDimensionTypeCode = (res.data || [])[0].dictCode
        })
        .catch(err => {})
    }

    function resetState() {
      targetLibData.targetLibTypeCode = undefined
      targetLibData.pmDimensionTypeCode = ''
      targetLibData.targetLibName = ''
      targetLibData.targetLibCode = ''
      targetLibData.targetLibStand = ''
      targetLibData.targetLibWeight = undefined
      targetLibData.targetLibDesc = ''
      targetLibData.isMustSelect = 0
      targetLibData.isBonus = 0
      targetLibData.targetLibRange = ''
      targetLibData.selfContentTem = ''
    }

    function handleSaveBtnClick() {
      let verifyArr = [
        targetLibData.targetLibTypeCode,
        targetLibData.pmDimensionTypeCode,
        targetLibData.targetLibName
      ]

      if (verifyArr.filter(item => item).length !== verifyArr.length) {
        message.warning({
          content: '标红色*的为必填项'
        })
        return
      }

      if (targetLibData.targetLibWeight === undefined || targetLibData.targetLibWeight < 0) {
        message.warning({
          content: '请输入权重'
        })
        return
      }

      if (targetLibData.isBonus === 1) {
        if (!targetLibData.targetLibRange) {
          message.warning({
            content: '加分项开启后，需要输入加分项的评分区间'
          })
          return
        }
        if (!checkRangeValue(targetLibData.targetLibRange)) {
          message.warning({
            content: '评分区间输入的格式错误，格式示范：0-5， 表示用户可输入的范围为0到5'
          })
          return
        }

        targetLibData.isMustSelect = 1
        targetLibData.targetLibWeight = 0
      }

      addTargetLib({
        targetLibTypeCode: targetLibData.targetLibTypeCode as string,
        targetLibName: targetLibData.targetLibName,
        pmDimensionTypeCode: targetLibData.pmDimensionTypeCode,
        targetLibCode: targetLibData.targetLibCode,
        targetLibStand: replaceBreak(targetLibData.targetLibStand),
        targetLibWeight: targetLibData.targetLibWeight as number,
        targetLibDesc: targetLibData.targetLibDesc,
        isMustSelect: targetLibData.isMustSelect,
        isBonus: targetLibData.isBonus,
        targetLibRange: targetLibData.targetLibRange,
        // 自评模板
        selfContentTem: targetLibData.selfContentTem ? targetLibData.selfContentTem : ''
      })
        .then(res => {
          resetState()
          router.back()
        })
        .catch(err => {})
    }

    onMounted(() => {
      getPageData()
    })

    onUnmounted(() => {
      resetState()
    })

    return () => (
      <PMLayout>
        <PMNav title='新增指标'></PMNav>
        <PMContent>
          <CCard title='新增指标' showTitle={false}>
            <a-form class='custom-form' labelCol={{style: {width: '150px'}}}>
              <a-form-item label='指标分类' required>
                <a-select
                  class='w-200 rounded-4'
                  v-model={[targetLibData.targetLibTypeCode, 'value']}
                  options={targetLibTypeSelectOptions.value}
                  placeholder='未分类指标'
                ></a-select>
              </a-form-item>
              <a-form-item label='指标类型' required>
                <a-radio-group v-model={[targetLibData.pmDimensionTypeCode, 'value']}>
                  {state.pmDimensionTypes.map(item => (
                    <a-radio value={item.dictCode}>{item.dictName}</a-radio>
                  ))}
                </a-radio-group>
              </a-form-item>
              <a-form-item label='指标名称' required>
                <a-input
                  class='w-300 rounded-4'
                  v-model={[targetLibData.targetLibName, 'value']}
                ></a-input>
              </a-form-item>
              <a-form-item label='指标编码'>
                <a-input
                  class='w-300 rounded-4'
                  v-model={[targetLibData.targetLibCode, 'value']}
                ></a-input>
              </a-form-item>
              <a-form-item label='考核标准'>
                <a-textarea
                  class='w-300 rounded-4'
                  v-model={[targetLibData.targetLibStand, 'value']}
                  row={6}
                ></a-textarea>
              </a-form-item>
              <a-form-item label='自评模板'>
                <a-textarea
                  class='w-300 rounded-4'
                  v-model={[targetLibData.selfContentTem, 'value']}
                  row={6}
                ></a-textarea>
              </a-form-item>
              <a-form-item label='权重' required>
                <TargetWeight
                  class='w-300'
                  v-model={[targetLibData.targetLibWeight, 'value']}
                  disabled={targetLibData.isBonus === 1}
                ></TargetWeight>
              </a-form-item>
              <a-form-item label='备注'>
                <a-textarea
                  class='w-300 rounded-4'
                  v-model={[targetLibData.targetLibDesc, 'value']}
                ></a-textarea>
              </a-form-item>
              <a-form-item label='必选标签' class='relative'>
                <a-switch
                  v-model={[targetLibData.isMustSelect, 'checked']}
                  checkedValue={1}
                  unCheckedValue={0}
                  disabled={targetLibData.isBonus === 1}
                ></a-switch>
                <CnNormalP class='mt-8'>开启保存后，新建考评组时默认添加到指标模板</CnNormalP>
              </a-form-item>
              <a-form-item label='加分项' class='relative'>
                <a-switch
                  v-model={[targetLibData.isBonus, 'checked']}
                  checkedValue={1}
                  unCheckedValue={0}
                ></a-switch>
                <CnNormalP class='mt-8'>开启加分项后，此指标做加分项用</CnNormalP>
              </a-form-item>

              {targetLibData.isBonus === 1 ? (
                <a-form-item label='评分区间' required>
                  <a-input
                    class='w-300 rounded-4'
                    v-model={[targetLibData.targetLibRange, 'value']}
                  ></a-input>
                  <CnNormalP class='mt-8'>
                    评分区间输入格式示例为：0-5, 表示用户可输入的范围为0到5
                  </CnNormalP>
                </a-form-item>
              ) : null}

              <a-form-item label={<div></div>} class='custom-formItem-noColon'>
                {/* <a-button>预览</a-button> */}
                <a-button
                  class='rounded-4 my-12 bg-primary text-white'
                  type='primary'
                  onClick={handleSaveBtnClick}
                >
                  保存
                </a-button>
              </a-form-item>
            </a-form>
          </CCard>
        </PMContent>
      </PMLayout>
    )
  }
})
